<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>视频管理</title>
    <style>
        .layui-table-cell{
            text-align:center;
            height: auto;
            white-space: normal;
        }
        .layui-table img{
            max-width:100px;
        }
    </style>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<body>
<table class="layui-hide" id="videoTable" lay-filter="videoTable"></table>

<script type="text/html" id="videoEdit">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script>
    layui.use(['table','layer','form','jquery'], function () {
        var table = layui.table,
            layer = layui.layer,
            form = layui.form,
            $ = layui.jquery;

        table.render({
            elem: '#videoTable',
            url:'${pageContext.request.contextPath}/selectAllVideo.do',
            title: '视频管理',
            cols: [[
                {field:'vName', title:'视频名称'},
                // {field:'coverImgAddress', title:'封面',templet:'<div><img src="{{d.coverImgAddress}}"></div>'},
                {field:'coverImgAddress', title:'封面',templet:function (d) {
                        return '<div><img src='+d.coverImgAddress+'></div>'}
                },
                {field:'isVip', title:'会员', templet: function (d) {
                    return (d.isVip == 1) ? "非会员" : "会员"
                }},
                {field:'director', title:'导演'},
                {field:'tName', title:'分类'},
                {fixed: 'right', title:'操作', toolbar: '#videoEdit'}
            ]],
            page: true,
            limits:[5,10,15,20],   //显示的几页
        });

        //监听编辑、删除事件
        //tool(subject)对应table表格中的lay-filter="subject"
        table.on('tool(videoTable)', function(obj){//obj代表一行数据和编辑按钮 删除按钮
            var data = obj.data;//obj.data代表一行数据
            var vid = data.vid;
            if(obj.event === 'del'){
                layer.confirm('确定要删除么？', function(index){//弹出询问框
                    $.post(("${pageContext.request.contextPath}/deleteVideoByVid.do"),{vid:vid},function(result){
                        if(result.status){
                            table.reload("videoTable",{});
                            layer.close(index);//关闭弹框
                        }else{
                            layer.msg(result.message);
                            return false;
                        }
                    },"json");
                });
            }else if(obj.event === 'edit'){
                layer.open({
                    video:1,//video=1 弹出页面层
                    title:"修改视频信息",
                    content: $("#videoPanel").html(),//弹出层内容
                    area:['475px','480px'],
                    btn: ['保存', '重置', '取消'],
                    yes: function(index, layero){//点击保存按钮执行的方法
                        var video = form.val("videoPanel");//获取form修改后的值
                        video.vid = vid;//将videoId注入获取的对象video中
                        var videoStr = JSON.stringify(video);
                        $.post("${pageContext.request.contextPath}/updateVideoByVId.do",{videoStr:videoStr},function(result){
                            if(result.status){
                                table.reload("videoTable",{});
                                layer.close(index);
                            }else{
                                layer.msg(result.message);
                                return false;
                            }
                        },"json");
                    },btn2: function(index, layero){//点击重置按钮执行的方法
                        form.val("videoPanel",{
                            "vName":data.vName,
                            "isVip":data.isVip,
                            "director":data.director,
                            "tid":data.tid
                        });
                        return false; //开启该代码可禁止点击该按钮关闭
                    },btn3: function(index, layero){//点击取消按钮执行的方法
                    },success: function(){//只要打开弹出层就执行此方法
                        $("#tid").empty();
                        $.ajaxSettings.async = false;//同步
                        $.post(("${pageContext.request.contextPath}/selectAllType.do"),{},function(result){
                            if(result.status){
                                var tNameHtml = '';
                                var typeList = result.data;
                                for(var i = 0;i < typeList.length;i++){
                                    tNameHtml += '<option value="'+typeList[i].tId+'">'+typeList[i].tName+'</option>';
                                }
                                $("#tid").append(tNameHtml);
                            }else{
                                layer.msg(result.message);
                            }
                        },"json");
                        form.val("videoPanel",{
                            "vName":data.vName,
                            "isVip":data.isVip,
                            "director":data.director,
                            "tid":data.tid
                        });
                        form.render();
                    }
                });
            }
        });

    });
</script>

<!--  视频面板  -->
<script type="text/html" id="videoPanel">
    <form class="layui-form" lay-filter="videoPanel">
        <div class="layui-form-item">
            <label class="layui-form-label">视频名称</label>
            <div class="layui-input-inline">
                <input type="text" name="vName" placeholder="请输入视频名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否会员</label>
            <div class="layui-input-inline">
                <select name="isVip" lay-verify="required">
                    <option value=""></option>
                    <option value="0">会员</option>
                    <option value="1">非会员</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">导演</label>
            <div class="layui-input-inline">
                <input type="text" name="director" placeholder="请输入导演" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-inline">
                <select id="tid" name="tid" lay-verify="required">
                </select>
            </div>
        </div>
    </form>
</script>
</body>
</html>
